<template>
  <div class="form_modal">
    <el-dialog
      :visible.sync="modal1"
      :close-on-click-modal="false"
      center
      :before-close="handleClose">
    <div class="modal_title">
      <span>{{title_name}} </span>
    </div>
    <el-form :model="formData" :rules="rules" ref="formData" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="11">
          <el-form-item label="客服名称" prop="csName">
            <el-input v-model="formData.csName" placeholder="请输入客服名称" :disabled="title_name === '编辑客服'"></el-input>
          </el-form-item>
          <el-form-item label="客服邮箱" prop="csEmail">
            <el-input v-model="formData.csEmail" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="客服手机号" prop="csPhone">
            <el-input v-model="formData.csPhone" :maxlength="11" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="客服状态" prop="status">
            <el-select v-model="formData.status" placeholder="请选择客服状态" @change="changeStatus" style="width:100%">
              <el-option v-for="(item, index) in csStatusArry" :value="item.status" :label="item.statusinfo" :key="index">
                {{item.statusinfo}}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item label="备注信息" prop="remark">
          <el-input type="textarea" v-model="formData.remark" style="width: 90%"></el-input>
        </el-form-item>
      </el-row>
    </el-form>

      <!-- 保存--取消按钮 -->
      <el-row :gutter="24" type="flex" justify="end">
        <el-col :span="3">
          <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="handleClose('formData')">取 消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { csInfoSave, csInfoEdmit} from '@/api/customerApi'
export default {
    props:['historyData'],
    data(){
        // 邮箱验证
        const validateEmail = (rule, value, callback) => {
             if (value === '') {
	          callback(new Error('请正确填写邮箱'));
	        } else {
	          if (value !== '') {
	            var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
	            if(!reg.test(value)){
	              callback(new Error('请输入有效的邮箱'));
	            }
	          }
	          callback();
	        }
        };
        //手机号验证
        const validatePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('手机号不能为空！'))
            } else if (!/^1[34578]\d{9}$/.test(value)) {
                callback(new Error('请输入正确的手机号！'))
            } else {
                callback()
            }
        };
        // 用户名称验证
        const validateCsName = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请输入用户名称！'))
            } else if (!/^[\u4e00-\u9fa5]+$/.test(value)) {
                return callback(new Error('请输入正确的中文用户名称!'))
            } else {
                return callback()
            }
        }

        return {
          title_name: '',
          modal1: false,
          //用户状态
          csStatusArry:[
            {
              status: 0,
              statusinfo: '正常'
            },
            {
              status: 9,
              statusinfo: '停用'
            }
          ],
          formData: {
            csName: '',
            csEmail: '',
            csPhone: '',
            status: '',
            statusInfo: '',
            remark: '' //备注
          },
          rules: {
            csName: [
              { required: true, message: '用户名称不能为空!', trigger: 'blur' },
              { type: 'string', max: 50, message: '不能超过50个字符', trigger: 'blur' },
              { validator: validateCsName, trigger: 'blur' }
            ],
            csPhone: [
              { required: true, message: '手机号不能为空!', trigger: 'blur'},
              { validator: validatePhone, trigger: 'blur'}
            ],
            csEmail:[
              { message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', validator: validateEmail, message: '请输入邮箱地址', trigger: ['blur', 'change'] }
            ],
            status: [
              { required: true, type: 'number', trigger: 'blur' }
            ]
          }
        }
    },
    methods:{
      //改变客服状态
      changeStatus(status){
        console.log("客服状态:", status)
        if (status){
          this.formData.status = status;
        }
      },
      //保存用户信息
      addForm() {
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            // 查出客服状态 statusInfo
            // this.csStatusArry.map(n=>{
            //     if (this.formData.status == n.status){
            //         this.formData.statusInfo = n.statusinfo
            //     }
            // })

            // 回调接口
            csInfoSave(this.formData).then((res)=>{
            //    console.log("save:", res.data);
              if ( res.statusCode == "200"){
                this.$message({message: '保存成功！！！',type: 'success'});
                this.$emit('submit', this.formData);// 子传给父， 查询所有
                this.modal1 = false;

                //清空上次记录
                this.formData = {
                  csName: '',
                  csEmail: '',
                  csPhone: '',
                  status: '',
                  statusInfo: '',
                  remark: '' //备注
                };
              }
            })
          } else {
            this.$message({showClose: true, message: 'error submit!!', type: 'error'});
            return false;
          }
        })
      },

      //修改用户信息
      edmitForm(){
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            // 查出客服状态 statusInfo
            // this.csStatusArry.map(n=>{
            //     if (this.formData.status == n.status){
            //         this.formData.statusInfo = n.statusinfo
            //     }
            // })

            // 回调接口
            csInfoEdmit(this.formData).then((res)=>{
            //    console.log("save:", res.data);
              if ( res.statusCode == "200"){
                this.$message({message: '修改成功！！！', type: 'success'});
                this.$emit('submit', this.formData);// 子传给父， 查询所有
                this.modal1 = false;
              }
            })
          } else {
            this.$message({showClose: true, message: 'error submit!!', type: 'error'});
            return false;
          }
        })
      },

      // 客服(新增/编辑) 保存按钮
      submitForm() {
        if (this.title_name === '新增客服') {
          this.addForm(); //回调 新增接口
        } else if (this.title_name === '编辑客服') {
          this.edmitForm(); //回调 编辑接口
        }
      },

      // 弹层取消、关闭
      handleClose(){
        this.$refs['formData'].resetFields();
        this.modal1 = false;
      },

      // 判断tilte 是哪个model框
      get_title() {
        if (this.title === '新增客服') {
          this.formData = {
            csName: '',
            csEmail: '',
            csPhone: '',
            status: '',
            statusInfo: '',
            remark: '' //备注
          }
        } else {
          this.formData = this.historyData;
        }
      },
      //全局方法封装
      addEdmitFun(){

      }
    },
    watch:{
      historyData: function (val) {
        this.formData = val;
        console.log("watch:", val);
        this.get_title()
      }
    }
}
</script>

<style scoped>
  /* @import url('../../assets/css/dialog.css'); */
</style>
